<template>
  <div id="message-list-page" :style="{
  width:'100%',
  height: (this.getWinSize().height-45-this.getSafeArea().top)+'px',
  paddingTop:(this.getSafeArea().top+45)+'px'
  }"
       v-loading="isLoading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="page-title" :style="{
      top:(this.getSafeArea().top)+'px'
    }">
      <div id="back-button" @click="$router.push('/MemberHome')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>消息列表</span>
    </div>


    <i-scroller-box
      id="message-list"
      ref="i-scroller-box"
      url="Member/getMessageList"
      style="position: relative;"
      :height="getWinSize().height-45-this.getSafeArea().top"
      :style="{
        top:'-12px',
       width:'100%'}">

      <template v-slot:list-item="{index,data}">
        <div class="item" @click="detail(data,index)">
          <div class="info-box">
            <div class="row1">
              <div class="shop-name" v-text="data.type.name"></div>
              <div class="last-time" v-text="data.createdTime"></div>
              <div class="c"></div>
            </div>
            <div class="row2">
              <div class="last-message" v-text="data.title"></div>
              <div class="un-read-nums">
                <span v-if="data.isRead.id===0 && !readMap[data.id]"></span>
              </div>
              <div class="c"></div>
            </div>
          </div>
        </div>
      </template>
    </i-scroller-box>
  </div>
</template>

<script>
import IScrollerBox from '../common/IScrollerBox'

export default {
  name: 'MessageList',
  components: {IScrollerBox},
  data: function () {
    return {
      isLoading: false,
      messageList: [],
      readMap:{}
    }
  },
  mounted () {
    this.getList()

  },
  methods: {
    // 获取会话-列表
    getList: function () {
      this.$refs['i-scroller-box'].getList({
        page: 1
      })
    },
    // 跳转-消息详情
    detail: function (currMessage,index) {
      this.bus.$emit('MessageDialogCallBus', currMessage.id, null)
      this.$set(this.readMap,currMessage.id,true)
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped>

</style>
